<template>
	<!-- 54是搜索框整体高度  52是tab的整体高度  不展示搜索框时需去除54-->
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<!-- 头部 -->
		<c-nav-bar title="预约详情"></c-nav-bar>

		<view class="titles">
			<view class="one">
				{{orderList.venuesName}}
			</view>
			<view class="two" @click="navArrow(orderList)">
				场馆详情 <u-icon name="arrow-right" color="#466491"></u-icon>
			</view>
		</view>
		<view class="address">
			<view class="one">
				<u-icon name="map" color="#999999"></u-icon> 场地地址：{{orderList.address}}
			</view>
			<view class="two" @click="navigation">
				<image src="https://i.ringzle.com/file/20240115/5156811b830640d5aaf62bca7d8a84d9.png" mode=""></image>
				导航
			</view>
		</view>
		<view class="address1">
			参观时间 ：{{orderList.yearMonthDay}} {{orderList.reservationPartTime}}
		</view>

		<view class="content">
			<view class="one">
				{{list.applicantsIntel}}
			</view>
			<view class="two">
				证件号：{{orderList.applicantsIntel}}
			</view>
			<view class="three">
				<view class="left">
					手机号： {{orderList.reservationPhone}}
				</view>
				<view class="right">
					<text v-if="orderList.reservationType==1">待核销</text>
					<text v-if="orderList.reservationType==2">已核销</text>
					<text v-if="orderList.reservationType==3">已过期</text>
					<text v-if="orderList.reservationType==4">已取消</text>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	export default {
		name: 'landmarkTicketOrder',
		components: {
			nodata
		},
		data() {
			return {
				mysearch: '',
				h: uni.getSystemInfoSync().windowHeight - 120,
				mt: uni.getSystemInfoSync().statusBarHeight + 54,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},

				orderList: {},
				current: 0,
				fromData: {
					// id: '',
					// venuesType: '',
					orderCode: ""
				},
				list: {}

			}
		},
		onLoad(option) {
			let obj = JSON.parse(option.list)
			console.log(obj);
			this.list = obj
			this.fromData.orderCode = obj.orderCode
			this.getFishermanOrder()
		},
		methods: {

			// 导航
			navigation() {
				uni.openLocation({
					latitude: Number(this.orderList.latitude),
					longitude: Number(this.orderList.longitude),
					name: this.orderList.venuesName,
				});
			},
			// 去详情页面
			navArrow(e) {
				// let item = {
				// 	wenhuaid: e.venuesId,
				// }
				// uni.navigateTo({
				// 	url: '/pagesIndex/culturalTour/details?item=' + item
				// })
				uni.navigateTo({
					url: '/pagesIndex/culturalTour/details?wenhuaid=' + e.venuesId,
				})
			},
			// 返回首页
			returnBack() {
				uni.reLaunch({
					url: '/pages/my/index'
				})
			},
			getFishermanOrder() {
				this.$api.get('/api/culturalVenues/reservation/details', this.fromData).then(res => {
					console.log(res);
					this.orderList = res.data.data
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #fff;
		padding: 60rpx 30rpx;

		.titles {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			width: 100%;

			.one {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				// margin-bottom: 30rpx;
				// margin-right: 24rpx;
				width: 80%;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* 指定最大行数 */
				-webkit-box-orient: vertical;
				/* 垂直排列文本 */
				overflow: hidden;
			}

			.two {
				font-size: 26rpx;
				color: #466491;
				font-weight: Regular;
				display: flex;
				align-items: center;
				width: 20%;
				text-align: center;
			}

		}

		.address {
			margin: 23rpx 0;
			display: flex;
			justify-content: space-between;

			.one {
				display: flex;
				align-items: center;
			}

			.two {
				padding: 10rpx 19rpx;
				background-color: #F5F5F5;
				text-align: center;
				border-radius: 50rpx;
				margin: auto 0;

				image {
					width: 18rpx;
					height: 18rpx;
					margin: 0 9rpx;
				}
			}
		}

		.address1 {
			margin-top: 40rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: Bold;
		}

		.content {
			margin-top: 30rpx;
			padding: 30rpx;
			background-color: #F8F8F8;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #333333;
			font-weight: Regular;

			.one {
				font-size: 32rpx;
				color: #333333;
				font-weight: Bold;
			}

			.two {
				margin: 20rpx 0;
			}

			.three {
				width: 100%;
				display: flex;
				justify-content: space-between;


				.right {
					font-size: 24rpx;
					color: #999999;
					font-weight: Regular;
				}
			}
		}


	}
</style>